<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%@include file="/commons/taglibs.jsp" %>
<!DOCTYPE html>
<html lang="en">
<fmt:bundle basename="res">
<head>
    <meta charset="UTF-8">
    <title><fmt:message key='dl' /></title>
    <%--    <jsp:include page="/WEB-INF/commons/commons-header.jsp" flush="true"/>--%>
    <style>
        * {
            font-family: "Microsoft YaHei", Arial, sans-serif;
            margin: 0;
            padding: 0;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        html, body {
            width: 100%;
            min-width: 1200px;
            height: 100%;
            font-size: 16px;
            color: #333333;
            margin: 0 auto;
        }

        body {
            min-height: 700px;
            background: url("${web_domain}/resources/login/bg_01.jpg") center center no-repeat;
            background-size: cover;
            background-color: #fff;
            padding-bottom: 100px;
            position: relative;
        }

        a {
            display: inline-block;
            color: #333;
            text-decoration: none;
            color: initial;
            -webkit-transition: all 0.2s;
            -moz-transition: all 0.2s;
            -ms-transition: all 0.2s;
            -o-transition: all 0.2s;
            transition: all 0.2s;
        }

        a:hover {
            color: initial;
        }

        img {

            border: none;
        }

        button {
            background: none;
            cursor: pointer;
        }

        button:hover {
            opacity: 0.9;
            filter: alpha(opacity=90);
        }

        button:active {
            opacity: 1;
            filter: alpha(opacity=100);
        }

        /*清除浮动*/
        .clearfix {
            *zoom: 1;
        }

        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            visibility: hidden;
            overflow: hidden;
            clear: both;
            position: relative;
        }

        input, select, textarea, button {
            font-size: 16px;
            color: #333333;
            border: none;
            outline: none;
        }

        /*去除包含ie10以上input标签自带的交叉和眼睛样式*/
        input::-ms-clear, input::-ms-reveal, ::-ms-clear, ::-ms-reveal {
            display: none;
        }

        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }

        .float-left, .child-float-left > * {
            float: left;
        }

        .float-right, .child-float-right > * {
            float: right;
        }

        /*
         * 图标初始化
        */
        .icon {
            position: relative;
            display: inline-block;
            background-position: center;
            background-repeat: no-repeat;
            background-size: auto;
        }

        .mark-bg {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            z-index: 0;
        }

        .content {
            position: relative;
            z-index: 1;
        }

        .main .logo {
            height: 22px;
            font-size: 22px;
            line-height: 1em;
            color: #fff;
            padding-left: 190px;
            position: absolute;
            left: 80px;
            top: 74px;
        }

        .main .logo img {
            width: 175px;
            height: 46px;
            position: absolute;
            left: 0;
            bottom: -3px;
        }

        .main .logo .text {
            padding-left: 15px;
            border-left: 2px solid #fff;
        }

        .main .login-box {
            width: 400px;
            height: 440px;
            padding: 40px;
            position: absolute;
            top: 0;
            right: 160px;
            bottom: 0;
            margin: auto;
            -webkit-box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.2);
            -moz-box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.2);
            box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.2);
            -webkit-border-radius: 8px;
            -moz-border-radius: 8px;
            border-radius: 8px;
            overflow: hidden;
        }

        .main .login-box .mark-bg {
            background-color: #fff;
            opacity: 0.9;
            filter: alpha(opacity=90);
        }

        .main .login-box .box-title {
            font-size: 24px;
            padding-bottom: 40px;
            font-weight: bold;
        }

        .main .login-box .icon {
            width: 22px;
            height: 22px;
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
        }

        .main .login-box .input-wrap {
            margin-bottom: 15px;
            position: relative;
        }

        .main .login-box .input-wrap input {
            width: 100%;
            /*font-size: 18px;*/
            line-height: 1.2em;
            padding: 12px 14px 12px 52px;
            background: none;
            border-bottom: 1px solid #d8d8d8;

        }

        .main .login-box .input-wrap input:focus {
            color: #36a5e9;
            border-bottom-color: #36a5e9;
        }

        .main .login-box .code-wrap {
            position: relative;
            padding-right: 140px;
        }

        .main .login-box .code-wrap .img-code {
            width: 100px;
            height: 40px;
            position: absolute;
            top: 0;
            right: 30px;
            bottom: 0;
            margin: auto;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
        }

        .main .login-box .input-wrap .icon {
            left: 14px;
        }

        .main .icon-user {
            background-image: url("${web_domain}/resources/login/icon_user_01.png");
        }

        .main .icon-user.active {
            background-image: url("${web_domain}/resources/login/icon_user_02.png");
        }

        .main .icon-password {
            background-image: url("${web_domain}/resources/login/icon_password_01.png");
        }

        .main .icon-password.active {
            background-image: url("${web_domain}/resources/login/icon_password_02.png");
        }

        .main .icon-safe {
            background-image: url("${web_domain}/resources/login/icon_safe_01.png");
        }

        .main .icon-safe.active {
            background-image: url("${web_domain}/resources/login/icon_safe_02.png");
        }

        .main .icon-refresh {
            right: 2px;
            background-image: url("${web_domain}/resources/login/icon_refresh_01.png");
        }

        .main .icon-refresh:hover {
            background-image: url("${web_domain}/resources/login/icon_refresh_02.png");
        }

        .main .icon-warn {
            left: 14px;
            background-image: url("${web_domain}/resources/login/icon_warn_01.png");
        }

        .main .login-box .box-footer {
            padding-top: 40px;
            position: relative;
        }

        .main .login-box .box-footer .tip {
            color: #e54848;
            font-size: 14px;
            line-height: 20px;
            position: absolute;
            top: -8px;
            left: 0;
            padding-left: 40px;
        }

        .main .login-box .box-footer .btn-sub {
            width: 100%;
            height: 56px;
            color: #ffffff;
            font-size: 20px;
            letter-spacing: 2px;
            background-color: #36a5e9;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
        }

        .main .footer {
            width: 100%;
            min-width: 1200px;
            color: #fff;
            line-height: 36px;
            text-align: center;
            padding: 14px;
            position: absolute;
            left: 0;
            bottom: 0;
            z-index: 99;
        }

        .main .footer .mark-bg {
            background-color: #000;
            opacity: 0.5;
            filter: alpha(opacity=50);
        }
    </style>
    <script type="text/javascript" src="${web_domain}/resources/plugins/jquery.js"></script>
    <script type="text/javascript">
        $(function () {
            if (window != top) {
                top.location.href = location.href;
            }

            var showError = function (msg) {
                $("#error-msg").text(msg).show();
                // layui.use('layer', function () {
                //     layer.msg(msg);
                // });
            };

            $("#username").focus();
            var code = "${param.code}";
            if (code) {
                try {
                    var codeAsInt = parseInt(code, 10);
                    switch (codeAsInt) {
                        case 1:
                            showError("账号或密码错误！");
                            break;
                        case 2:
                            showError("账号已被禁止登录！");
                            break;
                        case 4:
                            showError("账号或密码错误！");
                            break;
                        case 8:
                            showError("验证码错误！");
                            break;
                        case 18:
                            showError("请输入账号密码");
                            break;
                        case 20:
                            showError("账号或密码错误")
                            break;
                        default:
                            showError("未知错误！");
                            break;
                    }
                } catch (e) {
                    showError("网络异常！");
                }
            }
        });
    </script>
</head>

<body class="main">
<a class="logo" href="javascript:void(0)">
    <p class="text"><fmt:message key='ttsjht' /></p>
</a>
<form class="login-box" action="${web_domain}/login" method="post" id="user_form">
    <div class="mark-bg"></div>
    <div class="content">
        <p class="box-title"><fmt:message key='zhdl' /></p>
        <div class="input-wrap">
            <i class="icon icon-user"></i>
            <input type="text"
                   class="username"
                   name="username"
                   placeholder="<fmt:message key='qrsyhm' />"
                   autocomplete="off"
                   id="username"
            />
        </div>
        <div class="input-wrap">
            <i class="icon icon-password"></i>
            <input type="password"
                   class="password"
                   name="password"
                   id="password"
                   placeholder="<fmt:message key='qrsmm1' />"
                   autocomplete="off"
            />
        </div>
        <div class="code-wrap">
            <div class="input-wrap">
                <i class="icon icon-safe"></i>
                <input type="text"
                       class="code"
                       name="captcha"
                       placeholder="<fmt:message key='qsryam1' />"
                       autocomplete="off"
                />
            </div>
            <img class="img-code" id="captcha" src="${web_domain}/captcha"/>
            <i class="icon icon-refresh" id="refresh"></i>
        </div>
        <div class="box-footer">
            <p class="tip" id="error-msg" style="display: none;"><i class="icon icon-warn"></i><fmt:message key='qsryam1' /></p>
            <button type="submit" id="loginBtn" class="btn-sub"><fmt:message key='dl' /></button>
        </div>
    </div>
</form>
<%--<div class="footer">--%>
    <%--<div class="mark-bg"></div>--%>
    <%--<div class="content">--%>
        <%--<p>加盟代理：0752-12345678&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;邮箱：66668888@qq.com</p>--%>
        <%--<p>版权所有：©&nbsp;2019&nbsp;版权所有&nbsp;&nbsp;技术支持:&nbsp;冠铭科技&nbsp;粤ICP备18068303号</p>--%>
    <%--</div>--%>
<%--</div>--%>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
    $('input').focus(function () {
        $(this).siblings('.icon').addClass('active')
    }).blur(function () {
        $(this).siblings('.icon').removeClass('active')
    })


    $("#captcha,#refresh").click(function () {
        var captchaUrl = "${web_domain}/captcha?" + Math.random().toString();
        $("#captcha").attr("src", captchaUrl);
        $("#captchaText").focus();
    });
</script>
</body>
</fmt:bundle>
</html>